<template>
  <a-layout class="layout-demo">
    <a-layout-sider collapsible>
      <div class="logo"></div>
      <a-menu
        :defaultOpenKeys="['1']"
        :defaultSelectedKeys="['0_3']"
        :style="{ width: '100%' }"
        @menuItemClick="onClickMenuItem"
      >
        <a-menu-item v-for="(item, index) in routers" :key="item.path">
          <component :is="item.icon"></component>
          {{ item.title }}
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- <a-layout-header style="padding-left: 20px">
        <a-button shape="round" @click="onCollapse">
          <IconCaretRight v-if="collapsed" />
          <IconCaretLeft v-else />
        </a-button>
      </a-layout-header> -->
      <a-layout style="padding: 0 24px">
        <a-breadcrumb :style="{ margin: '16px 0' }">
          <a-breadcrumb-item>{{ title }}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content>
          <RouterView />
        </a-layout-content>
        <a-layout-footer
          ><span class="text-gray-500"
            >南京审计大学 © 2022</span
          ></a-layout-footer
        >
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script setup>
import { computed, ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { IconHome, IconCalendar } from "@arco-design/web-vue/es/icon";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();

const title = computed(() => {
  return routers.find((e) => e.path === route.path)?.title;
});

const routers = [
  {
    path: "/admin",
    title: "首页",
    icon: IconHome,
  },
  {
    path: "/admin/student",
    title: "学生管理",
    icon: IconCalendar,
  },
  {
    path: "/admin/question",
    title: "题目管理",
    icon: IconCalendar,
  },
  {
    path: "/admin/answer",
    title: "答题管理",
    icon: IconCalendar,
  },
];
const jump = (url) => {
  router.push(url);
};

const onClickMenuItem = (key) => {
  jump(key);
};
</script>
<style scoped>
.layout-demo {
  height: 100vh;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}
</style>
